<template>
    <div>
        <!-- 面包屑路径导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>分类品牌管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card class="box-card">
            <el-row :gutter="20" style="height: 40px">
              <el-col :span="10">
                <h1>所有分类</h1>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="17">
                <div class="block">
                  <el-button size="mini" type="success" @click="showAddCategoryMethod(0)">添加</el-button>
                  <el-input
                    v-model="searchCategory"
                    size="mini"
                    placeholder="输入关键字搜索"/>
                  <el-tree
                    style="font-size: 20px"
                    :data="categories.filter(item => !searchCategory || item.name.toLowerCase().includes(searchCategory.toLowerCase()))"
                    node-key="id"
                    :props="defaultProps"
                    :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span>{{ node.label }}</span>
                      <span>
                        <el-link
                          v-if="data.categoryVOList !== null"
                          type="primary"
                          size="mini"
                          @click="() => showAddCategoryMethod(data.id)">
                          添加
                        </el-link>&nbsp;&nbsp;&nbsp;
                        <el-link
                          type="warning"
                          size="mini"
                          @click="() => updateCategoryMethod(node, data)">
                          修改
                        </el-link>
                      </span>
                    </span>
                  </el-tree>
                </div>
              </el-col>
            </el-row>
        </el-card>
        <!-- 添加对话框 -->
      <el-drawer
        size="50%"
        title="添加分类"
        :before-close="cancelForm"
        :visible.sync="addCategoryDialogVisible"
        ref="addDrawer">
        <!-- 对话框主体内容 -->
        <div class="demo-drawer__content">
          <el-form style="position: absolute; left: 40px" ref="addCategoryForm" :model="addCategoryForm" label-width="80px">
            <el-tabs v-model="activeName" >
              <el-tab-pane label="基本信息"  name="first">
                <el-form-item label="分类名称" prop="name" >
                  <el-input v-model="addCategoryForm.name" ></el-input>
                </el-form-item>
              </el-tab-pane>
<!--              <el-tab-pane label="通用属性" name="current">-->
<!--                <el-form-item label="通用属性">-->
<!--                </el-form-item>-->
<!--              </el-tab-pane>-->
<!--              <el-tab-pane label="销售属性" name="sell">-->
<!--                <el-form-item label="销售属性">-->
<!--                </el-form-item>-->
<!--              </el-tab-pane>-->
            </el-tabs>
          </el-form>
          <!-- 对话框的操作按钮 -->
          <div class="demo-drawer__footer" style="
            position:absolute;
            left: 400px;
            top: 70%">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="addCategory">{{'确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>

<!--      &lt;!&ndash;修改3级分类&ndash;&gt;-->
<!--      <el-drawer-->
<!--          size="50%"-->
<!--          title="修改分类"-->
<!--          :before-close="cancelForm"-->
<!--          :visible.sync="editCategoryC3DialogVisible"-->
<!--          ref="updateC3Drawer">-->
<!--          &lt;!&ndash; 对话框主体内容 &ndash;&gt;-->
<!--          <div class="demo-drawer__content">-->
<!--            <el-form style="position: absolute; left: 40px" ref="editCategoryForm" :model="editCategoryForm" label-width="80px">-->
<!--              <el-tabs v-model="activeName" >-->
<!--                <el-tab-pane label="基本信息"  name="first">-->
<!--                    <el-form-item label="分类名称" prop="uName" >-->
<!--                      <el-input v-model="editCategoryForm.name" ></el-input>-->
<!--                    </el-form-item>-->
<!--                </el-tab-pane>-->
<!--                <el-tab-pane label="规格参数" name="second">-->
<!--                </el-tab-pane>-->
<!--                <el-tab-pane label="销售属性" name="sell">-->

<!--                </el-tab-pane>-->
<!--              </el-tabs>-->
<!--            </el-form>-->
<!--            &lt;!&ndash; 对话框的操作按钮 &ndash;&gt;-->
<!--            <div class="demo-drawer__footer" style="-->
<!--              position:absolute;-->
<!--              left: 400px;-->
<!--              top: 70%">-->
<!--              <el-button @click="cancelForm">取 消</el-button>-->
<!--              <el-button type="primary" @click="edit">{{'确 定' }}</el-button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-drawer>-->

      <!-- 修改普通对话框 -->
      <el-drawer
        size="50%"
        title="修改分类"
        :before-close="cancelForm"
        :visible.sync="editCategoryDialogVisible"
        ref="updateDawer">
        <!-- 对话框主体内容 -->
        <div class="demo-drawer__content">
          <el-form style="position: absolute; left: 40px" ref="editCategoryForm" :model="editCategoryForm" label-width="80px">
            <el-tabs v-model="activeName" >
              <el-tab-pane label="基本信息"  name="first">
                <el-form-item label="分类名称" prop="name" >
                  <el-input v-model="editCategoryForm.name" ></el-input>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form>
          <!-- 对话框的操作按钮 -->
          <div class="demo-drawer__footer" style="
            position:absolute;
            left: 400px;
            top: 70%">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="edit">{{'确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
</template>

<script>
export default {
  data () {
    return {
      checkCategorys: [1],
      renderFunc(h, option) {
        return <span>{ option.key } - { option.label }</span>
      },
      resource: [],
      defaultProps: {
        children: 'categoryVOList',
        label: 'name',
        value: 'id'
      },
      addProps: {
      },
      // tabs标签页显示内容
      activeName: 'first',
      // 是否显示添加对话框
      addCategoryDialogVisible: false,
      // 是否显示修改对话框
      // editCategoryC3DialogVisible: false, // 3级
      editCategoryDialogVisible: false,
      // 添加表单对象
      addCategoryForm: {
        name: '',
        parentId: '',
        isParent: '',
        sort: 1
      },
      // 修改表单对象
      editCategoryForm: {
        id: '',
        name: '',
        parentId: '',
        isParent: '',
        sort: 1
      },
      // 所有分类
      categories: [],
      // 所有通用属性
      specParam: [],
      // 搜索分类
      searchCategory: ''
    }
  },
  methods: {
    showAddCategoryMethod (parentId) {
      this.addCategoryForm.parentId = parentId
      this.addCategoryForm.isParent = parentId === 0
      this.addCategoryDialogVisible = true
    },
    cancelForm() {
      // this.addCategoryForm = []
      // this.$ref.addCategoryForm.resetFields()
      // this.editCategoryC3DialogVisible = false
      this.editCategoryDialogVisible = false
      this.addCategoryDialogVisible = false
    },
    async getAllCategory () {
      const { data: result } = await this.$http.get('category-server/category/getAll')
      this.categories = result.data
    },
    addCategory () {
      // 验证用户名是否已经存在
      this.$http.post('category-server/category/add', this.addCategoryForm).then(resp => {
        if (resp.data.result === 'SUCCESS') {
          this.$message.success('添加成功!')
          this.getAllCategory()
          this.addCategoryDialogVisible = false
        } else {
          this.$message.error(resp.data.message)
        }
      }).catch(error => {
        this.$message.warning(error.response.data.msg)
      })
    },
    edit () {
      // 1、修改数据到数据库
      this.$http.post('category-server/category/update', this.editCategoryForm).then(resp => {
      // 2、根据返回结果进行弹出提示
        if (resp.data.result === 'SUCCESS') {
          this.$message.success('修改成功！')
          // 3、关闭对话框
          this.editCategoryDialogVisible = false
          // 4、刷新表格数据
          this.getAllCategory()
        } else {
          this.$message.error(resp.data.message)
        }
      }).catch(error => {
        this.$message.warning(error.response.data.msg)
      })
    },
    updateCategoryMethod(node, data) {
      this.editCategoryForm.parentId = data.parentId
      this.editCategoryForm.name = data.name
      this.editCategoryForm.id = data.id
      this.editCategoryForm.isParent = data.isParent
      this.editCategoryDialogVisible = true
    }
  },
  created () {
    this.getAllCategory()
  },
  computed: {

  }
}
</script>

<style lang="less" scoped>
.photo {
  width: 50px;
  height: 50px;
  border-radius: 5px
}
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-dialog__footer {
  border-top: 1px solid #e8eaec;
}

</style>
